<template>
    <div class="loginMain">
        <img src="../assets/login/bgImg.png" alt="" class="bgImg">
        <div class="loginBox">
            <span class="loginTit">活动管理后台</span>
            <div class="userInfo">账号 <input type="text" v-model="userName">
                <span v-show="nameEmpty">请输入账号</span>
            </div>
            <div class="userInfo userInfo1 ">密码 <input :type="passFlag ? 'password' : 'text'" v-model="userPass">
                <i class="el-icon-view" @click="passFlag = !passFlag"></i>
                <span v-show="passEmpty">请输入密码</span>
            </div>
            <div class="loginBtn" @click="loginHandle">登录</div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            userName: '',
            userPass: '',
            nameEmpty: false,
            passEmpty: false,
            passFlag: true
        }
    },
    methods: {
        loginHandle() {
            // 账号：zbz2024   密码：cljkcy2024
            // 账号：gstl2024   密码：gstl2024
            if (this.userName == 'zbz2024') {
                if (this.userPass == 'cljkcy2024') {
                    sessionStorage.setItem('systemId', '1')
                    this.$router.replace('/index')
                } else {
                    this.$message.warning('密码错误')
                }
            } else if (this.userName == 'gstl2024') {
                if (this.userPass == 'gstl2024') {
                    sessionStorage.setItem('systemId', '2')
                    this.$router.replace('/index')
                } else {
                    this.$message.warning('密码错误')
                }
            } else {
                this.$message.warning('账号不存在')
            }

        }
    }
}
</script>
<style lang="less" scoped>
.bgImg {
    position: absolute;
    top: 279.9975px;
    left: 399.9975px;
    width: 354.9975px;
    height: 345.9975px;
}

.loginMain {
    position: relative;
    width: 100%;
    height: 100vh;
    background: url(../assets/login/lob.png);
    background-size: 100% 100%;
}

.loginBox {
    position: absolute;
    top: 240px;
    left: 1076.0025px;
    width: 350.0025px;
    height: 399.9975px;
    background: #FFFFFF;
    border-radius: 9.9975px;

    .loginTit {
        position: absolute;
        top: 45.9975px;
        left: 96.9975px;
        font-size: 26.0025px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
    }

    .userInfo {
        position: absolute;
        top: 146.0025px;
        left: 36px;
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;

        i {
            position: absolute;
            top: 6px;
            right: 9.9975px;
        }

        input {
            margin-left: 9.9975px;
            box-sizing: border-box;
            padding-left: 20.0025px;
            width: 216px;
            height: 36px;
            border: .9975px solid #348AFF;
            border-radius: 5.0025px;
            outline: none;
            font-size: 24px;
        }

        span {
            position: absolute;
            bottom: -24px;
            left: 87.9975px;
            font-size: 15.9975px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #FB4646;
        }
    }

    .userInfo1 {
        top: 240px;
    }

    .loginBtn {
        position: absolute;
        bottom: 30px;
        left: 35.0025px;
        width: 279.9975px;
        height: 50.0025px;
        background: #348AFF;
        border-radius: 5.0025px;
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 50.0025px;
        text-align: center;
        cursor: pointer;
    }
}
</style>
